         <style lang="less">
@import "./lineOrderManage.less";
</style>
<template>
  <div>
    <div class="search" id="lineOrderManagePage" v-show="lineOrderManagePageVisible">
        <Row>
            <Col>
                <Card>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
                            <Form-item label="订单编号" prop="orderSn">
                              <Input type="text" v-model="searchForm.orderSn" clearable placeholder="请输入订单编号" style="width: 200px"/>
                            </Form-item>
                            <Form-item label="买家名称" prop="buyerNick">
                              <Input type="text" v-model="searchForm.buyerNick" clearable placeholder="请输入买家名称" style="width: 200px"/>
                            </Form-item>
                            <Form-item label="供应商" prop="supplierId">
                              <Input type="text" v-model="searchForm.supplierId" clearable placeholder="请输入供应商" style="width: 200px"/>
                            </Form-item>
                            <Form-item label="订单状态" prop="status">
                              <Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 200px">
                                <Option value="0">未付款</Option>
                                <Option value="1">已付款</Option>
                                <Option value="2">未发货</Option>
                                <Option value="3">已发货</Option>
                                <Option value="4">交易成功</Option>
                                <Option value="5">交易关闭</Option>
                              </Select>
                            </Form-item>
                            <Button @click="handleSearch" type="primary" icon="search">搜索</Button>
                            <Button @click="handleReset" type="ghost" >重置</Button>
                            <!-- <span v-if="drop">
                              <Form-item label="价格区间" prop="email">
                                <Input type="text" v-model="searchForm.email" clearable placeholder="请输入邮箱" style="width: 200px"/>
                              </Form-item>
                              <Form-item label="状态" prop="sex">
                                <Select v-model="searchForm.sex" placeholder="请选择" clearable style="width: 200px">
                                  <Option value="0">审核通过</Option>
                                  <Option value="1">未审核</Option>
                                </Select>
                              </Form-item>
                              <Form-item label="创建时间" prop="createTime">
                                <DatePicker type="daterange" format="yyyy-MM-dd" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
                              </Form-item>
                            </span>
                            <Form-item style="margin-left:-35px;">
                              <Button @click="handleSearch" type="primary" icon="search">搜索</Button>
                              <Button @click="handleReset" type="ghost" >重置</Button>
                              <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                <Icon :type="dropDownIcon"></Icon>
                              </a>
                            </Form-item> -->
                        </Form>
                    </Row>
                    <Row class="operation">
                        <!-- <Button @click="addLine" type="primary" icon="plus-round">添加线路活动</Button> -->
                        <Button @click="delAll" type="ghost" icon="trash-a">批量删除</Button>
                        <Dropdown @on-click="handleDropdown">
                          <Button type="ghost">
                              更多操作
                              <Icon type="arrow-down-b"></Icon>
                          </Button>
                          <DropdownMenu slot="list">
                              <DropdownItem name="refresh">刷新</DropdownItem>
                              <DropdownItem name="exportData">导出所选数据</DropdownItem>
                          </DropdownMenu>
                        </Dropdown>
                    </Row>
                    <Row>
                        <Alert show-icon>
                            已选择 <span class="select-count">{{selectCount}}</span> 项
                            <a class="select-clear" @click="clearSelectAll">清空</a>
                        </Alert>
                    </Row>
                    <Row class="margin-top-10 searchable-table-con1">
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table" @on-expand="expandDetail"></Table>
                        <Table :columns="columns" :data="exportData" ref="exportTable" style="display:none"></Table>
                    </Row>
                    <Row type="flex" justify="end" class="code-row-bg page">
                        <Page :current="this.searchForm.pageNumber" :total="total" :page-size="this.searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50,100]" size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>

    <div class="search" id="lineOrderDetailPage" v-show="lineOrderDetailPageVisible" style="background-color:white;padding:20px;">
      <line-order-detail ref="lineOrderDetailComp" @on-line-activity-cancel="lineOrderDetailCancel" @on-line-activity-success="lineOrderSubmitSuccess"></line-order-detail>
    </div>

  </div>
</template>

<script>

import dateFormatUtil from "@/utils/dateFormatUtil";
import lineOrderDetail from "./lineOrderDetail.vue";
import expandRow from "./lineOrderDetailTableExpand.vue";

export default {
  name: "line-order-manage",
  components: {
    lineOrderDetail,
    expandRow
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码长度不得小于6位"));
      } else {
        callback();
      }
    };
    const validateMobile = (rule, value, callback) => {
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    const validatelineNameNoBlank = (rule, value, callback) => {
      var validObj = rule.validObj;
      var reg = new RegExp(validObj.regexp);
      if (reg.test(value)) {
        callback(new Error(validObj.msg));
      } else {
        callback();
      }
    };
    return {
      loading: true,
      drop: false,
      dropDownContent: "展开",
      dropDownIcon: "chevron-down",
      selectCount: 0,
      selectList: [],
      searchForm: {
        lineName: "",
        status: "",
        pageNumber: 1,
        pageSize: 10,
        sort: "createTime",
        order: "desc",
        startDate: "",
        endDate: "",
        flag: 1, //线路活动标识
        supplierId: '',
        recType: 3
      },

      modalTitle: "",

      submitLoading: false,
      columns: [
        {
          title: "展开",
          type: 'expand',
          width: 60,
          render: (h, params) => {
            console.log( params.row);
            // console.log( params.row.ordersGoodsList);
            return h(expandRow, {
              props: {
                orderInfo: params.row,
                ordersGoodsList: params.row.ordersLineList
              }
            })
          }
        },
        // {
        //   type: "selection",
        //   width: 60,
        //   align: "center"
        // },
        {
          title: "订单号",
          key: "orderSn",
          width: 150,
          sortable: true
        },
        {
          title: "买家昵称",
          // key: "userId",
          key: "buyerNick",
          width: 150,
          sortable: true
        },
        {
          title: "供应商",
          // key: "supplierId",
          key: "supplier",
          width: 140,
          sortable: true,
          align: "center",
          render: (h, params) => {
            let re = "";
            if(params.row.supplier != null){
              re = params.row.supplier.supplierName;
            }
            return h("span", re);
          }
        },
        {
          title: "商品数量",
          key: "goodsCount",
          width: 140,
          sortable: true
        },
        {
          title: "商品总价",
          key: "goodsAmountTotal",
          width: 140,
          sortable: true
        },
        {
          title: "订单状态",
          key: "status",
          align: "center",
          width: 170,
          render: (h, params) => {
            let re = "";
            if (params.row.status === 0) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "red"
                    }
                  },
                  "未付款"
                )
              ]);
            } else if (params.row.status === 1) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "red"
                    }
                  },
                  "已付款"
                )
              ]);
            } else if (params.row.status === 2) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "green"
                    }
                  },
                  "未发货"
                )
              ]);
            } else if (params.row.status === 3) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "green"
                    }
                  },
                  "已发货"
                )
              ]);
            } else if (params.row.status === 4) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "green"
                    }
                  },
                  "交易成功"
                )
              ]);
            } else if (params.row.status === 5) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "green"
                    }
                  },
                  "交易关闭"
                )
              ]);
            }
          },
          filters: [
            {
              label: "未付款",
              value: 0
            },
            {
              label: "已付款",
              value: 1
            },
            {
              label: "未发货",
              value: 2
            },
            {
              label: "已发货",
              value: 3
            },
            {
              label: "交易成功",
              value: 4
            },
            {
              label: "交易关闭",
              value: 5
            }
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value === 0) {
              return row.status === 0;
            } else if (value === 1) {
              return row.status === 1;
            } else if (value === 2) {
              return row.status === 2;
            } else if (value === 3) {
              return row.status === 3;
            } else if (value === 4) {
              return row.status === 4;
            } else if (value === 5) {
              return row.status === 5;
            }
          }
        },

        {
          title: "创建时间",
          key: "createTime",
          sortable: true,
          sortType: "desc",
          width: 170
        },
        {
          title: "操作",
          key: "action",
          width: 340,
          align: "center",
          render: (h, params) => {
            if (params.row.status === 100) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      }
                    }
                  },
                  "查看"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "ghost",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.disable(params.row);
                      }
                    }
                  },
                  "禁用"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.remove(params.row);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            } else {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      }
                    }
                  },
                  "查看"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.remove(params.row);
                      }
                    }
                  },
                  "取消"
                )
              ]);
            }
          }
        }
      ],
      data: [],
      exportData: [],
      total: 0,
      lineOrderManagePageVisible: true,
      lineOrderDetailPageVisible: false,
      lineOrderConfigPageVisible: false
    };
  },
  methods: {
    init() {
      this.getLineOrder();
      this.cleanSelectCount();
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getLineOrder();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getLineOrder();
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    selectBirthdayDateRange(v) {
      if (v) {
        this.searchForm.startBirthday = v[0];
        this.searchForm.endBirthday = v[1];
      }
    },
    getLineOrder() {
      this.loading = true;
      this.getRequest("/orders/list", this.searchForm).then(res => {
        this.loading = false;
        if (res.success === true) {
          this.data = res.result.content;
          this.total = res.result.totalElements;
        }
      }).catch(error => {
        //超时之后在这里捕抓错误信息.
        console.log("================请求超时===================");
        console.log(error);

      });
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.init();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      // 重新加载数据
      this.init();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.init();
    },
    getRoleList() {
      this.getRequest("/role/getAllList").then(res => {
        console.log("================res请求超时===================");
        console.log(res.toString());
        if (res.success === true) {
          this.roleList = res.result;
        }
      }).catch(error => {
        //超时之后在这里捕抓错误信息.
        console.log("================请求超时===================");
        console.log(error);

      });
    },
    handleDropdown(name) {
      if (name === "exportData") {
        if (this.selectCount <= 0) {
          this.$Message.warning("您还未选择要导出的数据");
          return;
        }
        this.$Modal.confirm({
          title: "确认导出",
          content: "您确认要导出所选 " + this.selectCount + " 条数据?",
          onOk: () => {
            this.$refs.exportTable.exportCsv({
              filename: "用户数据"
            });
          }
        });
      } else if (name === "refresh") {
        this.getLineOrder();
      }
    },
    selectRoles(v) {},

    addLine(v) {
      this.$refs.lineOrderDetailComp.resetFormByType(0,null);
      //切换界面显示隐藏
      this.lineOrderManagePageVisible = false;
      this.lineOrderDetailPageVisible = true;
    },

    lineOrderDetailCancel:function(v){
      if(v){
        this.lineOrderManagePageVisible = true;
        this.lineOrderDetailPageVisible = false;
      }
    },
    lineOrderSubmitSuccess: function(v){
      if(v){
        this.lineOrderManagePageVisible = true;
        this.lineOrderDetailPageVisible = false;
        this.getLineOrder();
      }
    },
    lineOrderConfigCancel:function(v){
      if(v){
        this.lineOrderConfigPageVisible = false;
        this.lineOrderManagePageVisible = true;
        this.lineOrderDetailPageVisible = false;
      }
    },

    expandDetail(e){
      // console.log("展开收取")
      // console.log(e);

    },

    edit(v) {
      let editlineOrderId = v.id;
      this.loading = true;
      this.getRequest("/orders/info",{orderId:editlineOrderId} ).then(res =>{
        console.log("================res请求超时===================");
        console.log(res.toString());
        this.loading = false;
        console.log(res.result);
        let updatelineOrder = res.result;

        this.$refs.lineOrderDetailComp.resetFormByType(1, updatelineOrder);
        //切换界面显示隐藏
        this.lineOrderManagePageVisible = false;
        this.lineOrderDetailPageVisible = true;
      }).catch(error => {
        //超时之后在这里捕抓错误信息.
        console.log("================请求超时===================");
        console.log(error);

      })

    },
    review(v) {
      var reviewObj={
        reviewId: v.id,
        title: "线路活动审核",
        status: v.status+'',
        reason: v.reason
      }
      this.$refs.lineReviewModal.openReviewModal(true,reviewObj);
    },
    reviewSuccess:function(v){
      if(v){
        this.getLineOrder();
      }
    },
    enable(v) {
      this.$Modal.confirm({
        title: "确认启用",
        content: "您确认要启用用户 " + v.lineName + " ?",
        onOk: () => {
          this.postRequest("/line/enable/" + v.id).then(res => {
            if (res.success === true) {
              this.$Message.success("操作成功");
              this.init();
            }
          });
        }
      });
    },
    disable(v) {
      this.$Modal.confirm({
        title: "确认禁用",
        content: "您确认要禁用用户 " + v.lineName + " ?",
        onOk: () => {
          this.postRequest("/line/disable/" + v.id).then(res => {
            if (res.success === true) {
              this.$Message.success("操作成功");
              this.init();
            }
          });
        }
      });
    },

    openBook(v){
      this.$Modal.confirm({
        title: "确认启用",
        content: "您确认要开启预定线路 " + v.title + " ?",
        onOk: () => {
          this.putRequest("/line/reserve",{id:v.id,isLineBefore:1} ).then(res => {
            if (res.success === true) {
              this.$Message.success("开启预定成功");
              this.init();
            }
          });
        }
      });
    },

    closeBook(v){
      this.$Modal.confirm({
        title: "确认启用",
        content: "您确认要关闭预定线路 " + v.title + " ?",
        onOk: () => {
          this.putRequest("/line/reserve",{id:v.id,isLineBefore:0} ).then(res => {
            if (res.success === true) {
              this.$Message.success("开启预定成功");
              this.init();
            }
          });
        }
      });
    },
    view(v){
      let viewlineOrderId = v.id;
      this.loading = true;
      // this.getRequest("/line/getLineById/" + viewlineOrderId).then(res =>{
      this.getRequest("/line/getMap", {lineId:viewlineOrderId}).then(res =>{
        console.log("================res请求超时===================");
        console.log(res.toString());
        this.loading = false;
        let lineMapInfo = res.result;
        // this.$refs.lineOrderConfigComp.resetFormByType(1, lineOrderInfo);
        this.$refs.lineOrderConfigComp.resetFormByType(lineMapInfo);
        //切换界面显示隐藏
        this.lineOrderManagePageVisible = false;
        this.lineOrderDetailPageVisible = false;
        this.lineOrderConfigPageVisible = true;
      }).catch(error => {
        //超时之后在这里捕抓错误信息.
        console.log("================请求超时===================");
        console.log(error);

      })
    },
    remove(v) {
      this.$Modal.confirm({
        title: "确认取消",
        content: "您确认要取消订单 " + v.id + " ?",
        onOk: () => {
          this.deleteRequest("/line/delete/" + v.id).then(res => {
            if (res.success === true) {
              this.$Message.success("取消成功");
              this.init();
            }
          });
        }
      });
    },
    dropDown() {
      if (this.drop) {
        this.dropDownContent = "展开";
        this.dropDownIcon = "chevron-down";
      } else {
        this.dropDownContent = "收起";
        this.dropDownIcon = "chevron-up";
      }
      this.drop = !this.drop;
    },
    showSelect(e) {
      this.exportData = e;
      this.selectList = e;
      this.selectCount = e.length;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
      this.cleanSelectCount();
    },
    cleanSelectCount(){
      this.selectCount = 0;
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning("您还未选择要删除的数据");
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
        onOk: () => {
          let ids = "";
          this.selectList.forEach(function(e) {
            ids += e.id + ",";
          });
          ids = ids.substring(0, ids.length - 1);
          this.deleteRequest("/line/delete/" + ids).then(res => {
            if (res.success === true) {
              this.$Message.success("删除成功");
              this.init();
            }
          });
        }
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>
